<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能相册管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        accent: '#FF7D00',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.3s ease-in-out',
                        'slide-up': 'slideUp 0.3s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .photo-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                gap: 1rem;
            }
            .photo-grid-xl {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
            .photo-grid-sm {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .backdrop-blur {
                backdrop-filter: blur(8px);
            }
            .photo-hover {
                transition: all 0.3s ease;
            }
            .photo-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-light min-h-screen flex flex-col text-dark">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/80 backdrop-blur shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-images text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">智能相册管理系统</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#timeline" class="font-medium hover:text-primary transition-colors">时间轴</a>
                <a href="#folders" class="font-medium hover:text-primary transition-colors">文件夹</a>
                <a href="#faces" class="font-medium hover:text-primary transition-colors">人物</a>
                <a href="#search" class="font-medium hover:text-primary transition-colors">搜索</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <button id="refresh-btn" class="flex items-center space-x-1 px-3 py-1.5 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors">
                    <i class="fa-solid fa-refresh"></i>
                    <span>刷新</span>
                </button>
                <button id="upload-btn" class="flex items-center space-x-1 px-3 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                    <i class="fa-solid fa-upload"></i>
                    <span>上传</span>
                </button>
                <button id="menu-toggle" class="md:hidden text-dark hover:text-primary">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fade-in">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#timeline" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">时间轴</a>
                <a href="#folders" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">文件夹</a>
                <a href="#faces" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">人物</a>
                <a href="#search" class="py-2 px-3 hover:bg-gray-light rounded-lg transition-colors">搜索</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 统计卡片 -->
        <section class="mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.1s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-dark text-sm">总照片数</p>
                            <h3 class="text-2xl font-bold mt-1" id="total-photos">0</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa-solid fa-camera-retro text-primary text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="w-full bg-gray-light rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                        </div>
                        <p class="text-xs text-gray-dark mt-1">相比上月 <span class="text-green-500">+12%</span></p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.2s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-dark text-sm">文件夹数</p>
                            <h3 class="text-2xl font-bold mt-1" id="total-folders">0</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                            <i class="fa-solid fa-folder text-secondary text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="w-full bg-gray-light rounded-full h-2">
                            <div class="bg-secondary h-2 rounded-full" style="width: 45%"></div>
                        </div>
                        <p class="text-xs text-gray-dark mt-1">相比上月 <span class="text-green-500">+5%</span></p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.3s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-dark text-sm">识别出的人物</p>
                            <h3 class="text-2xl font-bold mt-1" id="total-faces">0</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center">
                            <i class="fa-solid fa-user text-accent text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="w-full bg-gray-light rounded-full h-2">
                            <div class="bg-accent h-2 rounded-full" style="width: 60%"></div>
                        </div>
                        <p class="text-xs text-gray-dark mt-1">相比上月 <span class="text-green-500">+8%</span></p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.4s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-dark text-sm">存储空间</p>
                            <h3 class="text-2xl font-bold mt-1" id="storage-used">0 GB / 5 GB</h3>
                        </div>
                        <div class="w-12 h-12 rounded-full bg-dark/10 flex items-center justify-center">
                            <i class="fa-solid fa-hdd text-dark text-xl"></i>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="w-full bg-gray-light rounded-full h-2">
                            <div class="bg-dark h-2 rounded-full" style="width: 30%"></div>
                        </div>
                        <p class="text-xs text-gray-dark mt-1">已使用 <span class="font-medium">30%</span></p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 最近添加 -->
        <section class="mb-12">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold">最近添加</h2>
                <div class="flex items-center space-x-2">
                    <button id="view-grid" class="p-2 bg-primary text-white rounded-md">
                        <i class="fa-solid fa-th-large"></i>
                    </button>
                    <button id="view-list" class="p-2 bg-gray-light hover:bg-gray-medium text-dark rounded-md transition-colors">
                        <i class="fa-solid fa-list"></i>
                    </button>
                    <button id="view-slideshow" class="p-2 bg-gray-light hover:bg-gray-medium text-dark rounded-md transition-colors">
                        <i class="fa-solid fa-play"></i>
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 示例照片 -->
                <div class="relative group photo-hover rounded-xl overflow-hidden shadow-sm bg-white">
                    <img src="https://picsum.photos/seed/photo1/400/300" alt="示例照片" class="w-full h-48 object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                        <div class="p-3 w-full">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="text-white font-medium truncate w-32">2023-05-15 14:30</p>
                                    <p class="text-white/80 text-xs">1.2 MB</p>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-heart"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-download"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="relative group photo-hover rounded-xl overflow-hidden shadow-sm bg-white">
                    <img src="https://picsum.photos/seed/photo2/400/300" alt="示例照片" class="w-full h-48 object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                        <div class="p-3 w-full">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="text-white font-medium truncate w-32">2023-05-14 09:15</p>
                                    <p class="text-white/80 text-xs">0.9 MB</p>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-heart"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-download"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="relative group photo-hover rounded-xl overflow-hidden shadow-sm bg-white">
                    <img src="https://picsum.photos/seed/photo3/400/300" alt="示例照片" class="w-full h-48 object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                        <div class="p-3 w-full">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="text-white font-medium truncate w-32">2023-05-10 16:45</p>
                                    <p class="text-white/80 text-xs">1.5 MB</p>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-heart"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-download"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="relative group photo-hover rounded-xl overflow-hidden shadow-sm bg-white">
                    <img src="https://picsum.photos/seed/photo4/400/300" alt="示例照片" class="w-full h-48 object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                        <div class="p-3 w-full">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="text-white font-medium truncate w-32">2023-05-08 11:20</p>
                                    <p class="text-white/80 text-xs">1.1 MB</p>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-heart"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-download"></i>
                                    </button>
                                    <button class="w-8 h-8 rounded-full bg-white/20 hover:bg-white/40 flex items-center justify-center text-white transition-colors">
                                        <i class="fa-solid fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 时间轴视图 -->
        <section id="timeline" class="mb-12">
            <h2 class="text-xl font-bold mb-4">时间轴</h2>
            
            <div class="space-y-6">
                <!-- 2023年5月 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="px-5 py-3 bg-primary/10 border-b border-primary/20">
                        <h3 class="font-semibold text-primary">2023年5月</h3>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t1/400/300" alt="2023年5月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">5月15日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t2/400/300" alt="2023年5月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">5月14日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t3/400/300" alt="2023年5月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">5月10日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t4/400/300" alt="2023年5月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">5月8日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 2023年4月 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="px-5 py-3 bg-primary/10 border-b border-primary/20">
                        <h3 class="font-semibold text-primary">2023年4月</h3>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t5/400/300" alt="2023年4月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">4月28日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t6/400/300" alt="2023年4月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">4月25日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t7/400/300" alt="2023年4月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">4月18日</span>
                                </div>
                            </div>
                            <div class="relative group photo-hover rounded-lg overflow-hidden">
                                <img src="https://picsum.photos/seed/t8/400/300" alt="2023年4月照片" class="w-full h-36 object-cover">
                                <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <span class="text-white font-medium">4月10日</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 查看更多按钮 -->
                <div class="text-center">
                    <button class="px-5 py-2 bg-white hover:bg-gray-50 text-primary border border-primary/20 rounded-lg transition-colors">
                        加载更多 <i class="fa-solid fa-chevron-down ml-1"></i>
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 文件夹视图 -->
        <section id="folders" class="mb-12">
            <h2 class="text-xl font-bold mb-4">文件夹</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <!-- 示例文件夹 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 bg-primary/10 flex items-center justify-center">
                        <i class="fa-solid fa-folder text-primary text-5xl"></i>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold">相机胶卷</h3>
                            <span class="text-sm text-gray-dark">128 张照片</span>
                        </div>
                        <div class="mt-2 flex space-x-1">
                            <img src="https://picsum.photos/seed/f1/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f2/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f3/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <div class="w-10 h-10 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                                +125
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 bg-secondary/10 flex items-center justify-center">
                        <i class="fa-solid fa-folder text-secondary text-5xl"></i>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold">旅行</h3>
                            <span class="text-sm text-gray-dark">42 张照片</span>
                        </div>
                        <div class="mt-2 flex space-x-1">
                            <img src="https://picsum.photos/seed/f4/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f5/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f6/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <div class="w-10 h-10 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                                +39
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 bg-accent/10 flex items-center justify-center">
                        <i class="fa-solid fa-folder text-accent text-5xl"></i>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold">家人</h3>
                            <span class="text-sm text-gray-dark">65 张照片</span>
                        </div>
                        <div class="mt-2 flex space-x-1">
                            <img src="https://picsum.photos/seed/f7/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f8/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f9/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <div class="w-10 h-10 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                                +62
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 bg-dark/10 flex items-center justify-center">
                        <i class="fa-solid fa-folder text-dark text-5xl"></i>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold">宠物</h3>
                            <span class="text-sm text-gray-dark">33 张照片</span>
                        </div>
                        <div class="mt-2 flex space-x-1">
                            <img src="https://picsum.photos/seed/f10/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f11/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f12/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <div class="w-10 h-10 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                                +30
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 bg-primary/10 flex items-center justify-center">
                        <i class="fa-solid fa-folder text-primary text-5xl"></i>
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-center">
                            <h3 class="font-semibold">风景</h3>
                            <span class="text-sm text-gray-dark">28 张照片</span>
                        </div>
                        <div class="mt-2 flex space-x-1">
                            <img src="https://picsum.photos/seed/f13/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f14/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <img src="https://picsum.photos/seed/f15/100/100" alt="文件夹预览" class="w-10 h-10 rounded object-cover">
                            <div class="w-10 h-10 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                                +25
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-36 flex items-center justify-center bg-gray-light">
                        <button class="w-16 h-16 rounded-full bg-white border-2 border-dashed border-gray-medium flex items-center justify-center text-gray-dark hover:text-primary hover:border-primary transition-colors">
                            <i class="fa-solid fa-plus text-2xl"></i>
                        </button>
                    </div>
                    <div class="p-4 text-center">
                        <h3 class="font-medium text-gray-dark">新建文件夹</h3>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 人物识别 -->
        <section id="faces" class="mb-12">
            <h2 class="text-xl font-bold mb-4">人物</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <!-- 示例人物 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-48 relative">
                        <img src="https://picsum.photos/seed/person1/300/400" alt="人物照片" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                            <h3 class="text-white font-semibold">爸爸</h3>
                            <p class="text-white/80 text-sm">24 张照片</p>
                        </div>
                    </div>
                    <div class="p-3 flex space-x-1">
                        <img src="https://picsum.photos/seed/p1/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p2/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p3/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p4/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <div class="w-12 h-12 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                            +20
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-48 relative">
                        <img src="https://picsum.photos/seed/person2/300/400" alt="人物照片" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                            <h3 class="text-white font-semibold">妈妈</h3>
                            <p class="text-white/80 text-sm">19 张照片</p>
                        </div>
                    </div>
                    <div class="p-3 flex space-x-1">
                        <img src="https://picsum.photos/seed/p5/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p6/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p7/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p8/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <div class="w-12 h-12 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                            +15
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-48 relative">
                        <img src="https://picsum.photos/seed/person3/300/400" alt="人物照片" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                            <h3 class="text-white font-semibold">朋友 A</h3>
                            <p class="text-white/80 text-sm">15 张照片</p>
                        </div>
                    </div>
                    <div class="p-3 flex space-x-1">
                        <img src="https://picsum.photos/seed/p9/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p10/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p11/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p12/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <div class="w-12 h-12 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                            +11
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-sm overflow-hidden group photo-hover">
                    <div class="h-48 relative">
                        <img src="https://picsum.photos/seed/person4/300/400" alt="人物照片" class="w-full h-full object-cover">
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
                            <h3 class="text-white font-semibold">朋友 B</h3>
                            <p class="text-white/80 text-sm">12 张照片</p>
                        </div>
                    </div>
                    <div class="p-3 flex space-x-1">
                        <img src="https://picsum.photos/seed/p13/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p14/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p15/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <img src="https://picsum.photos/seed/p16/100/100" alt="人物照片" class="w-12 h-12 rounded object-cover">
                        <div class="w-12 h-12 rounded bg-gray-light flex items-center justify-center text-xs text-gray-dark">
                            +8
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 搜索功能 -->
        <section id="search" class="mb-12">
            <h2 class="text-xl font-bold mb-4">搜索</h2>
            
            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="relative flex-grow">
                        <input type="text" placeholder="搜索照片..." class="w-full px-4 py-3 rounded-lg border border-gray-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-dark hover:text-primary">
                            <i class="fa-solid fa-search"></i>
                        </button>
                    </div>
                    <button class="px-4 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                        <i class="fa-solid fa-filter mr-2"></i>筛选
                    </button>
                </div>
                
                <!-- 搜索建议 -->
                <div class="mb-6">
                    <h3 class="font-medium mb-3">搜索建议</h3>
                    <div class="flex flex-wrap gap-2">
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-camera mr-1"></i> 自拍
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-tree mr-1"></i> 风景
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-cutlery mr-1"></i> 美食
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-paw mr-1"></i> 宠物
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-car mr-1"></i> 旅行
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-mountain mr-1"></i> 山
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-umbrella-beach mr-1"></i> 海滩
                        </button>
                        <button class="px-3 py-1.5 bg-gray-light hover:bg-gray-medium rounded-full text-sm transition-colors">
                            <i class="fa-solid fa-building mr-1"></i> 城市
                        </button>
                    </div>
                </div>
                
                <!-- 最近搜索 -->
                <div>
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-medium">最近搜索</h3>
                        <button class="text-sm text-gray-dark hover:text-primary">清空</button>
                    </div>
                    <div class="space-y-2">
                        <button class="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-light rounded-lg transition-colors">
                            <div class="flex items-center space-x-3">
                                <i class="fa-solid fa-clock text-gray-dark"></i>
                                <span>旅行</span>
                            </div>
                            <i class="fa-solid fa-times text-gray-dark hover:text-red-500"></i>
                        </button>
                        <button class="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-light rounded-lg transition-colors">
                            <div class="flex items-center space-x-3">
                                <i class="fa-solid fa-clock text-gray-dark"></i>
                                <span>家人</span>
                            </div>
                            <i class="fa-solid fa-times text-gray-dark hover:text-red-500"></i>
                        </button>
                        <button class="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-light rounded-lg transition-colors">
                            <div class="flex items-center space-x-3">
                                <i class="fa-solid fa-clock text-gray-dark"></i>
                                <span>2023年春天</span>
                            </div>
                            <i class="fa-solid fa-times text-gray-dark hover:text-red-500"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 相册分析 -->
        <section class="mb-12">
            <h2 class="text-xl font-bold mb-4">相册分析</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 类型分布 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="font-semibold mb-4">照片类型分布</h3>
                    <div class="h-64">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
                
                <!-- 月度统计 -->
                <div class="bg-white rounded-xl shadow-sm p-5">
                    <h3 class="font-semibold mb-4">月度新增照片</h3>
                    <div class="h-64">
                        <canvas id="monthlyChart"></canvas>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-light py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <i class="fa-solid fa-images text-primary text-xl"></i>
                    <span class="font-semibold">智能相册管理系统</span>
                </div>
                
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">关于我们</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">使用帮助</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-dark hover:text-primary transition-colors">联系我们</a>
                </div>
                
                <div class="flex space-x-4">
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-weibo"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-wechat"></i>
                    </a>
                    <a href="#" class="w-8 h-8 rounded-full bg-gray-light hover:bg-gray-medium flex items-center justify-center text-gray-dark transition-colors">
                        <i class="fa-brands fa-github"></i>
                    </a>
                </div>
            </div>
            
            <div class="mt-6 text-center text-gray-dark text-sm">
                <p>© 2023 智能相册管理系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 模态框：照片详情 -->
    <div id="photo-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-xl shadow-lg max-w-4xl w-full max-h-[90vh] flex flex-col animate-fade-in">
            <div class="p-4 flex justify-between items-center border-b">
                <h3 class="font-semibold text-lg">照片详情</h3>
                <button id="close-modal" class="text-gray-dark hover:text-dark">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>
            
            <div class="flex-grow overflow-auto p-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="md:col-span-2">
                        <img id="modal-image" src="https://picsum.photos/seed/modal/800/600" alt="照片详情" class="w-full h-auto rounded-lg">
                    </div>
                    
                    <div>
                        <h4 class="font-medium mb-3">照片信息</h4>
                        <div class="space-y-3">
                            <div class="flex">
                                <span class="text-gray-dark w-24">文件名:</span>
                                <span>DSC0001.jpg</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-dark w-24">拍摄时间:</span>
                                <span>2023-05-15 14:30:22</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-dark w-24">文件大小:</span>
                                <span>1.2 MB</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-dark w-24">分辨率:</span>
                                <span>3000 × 2000</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-dark w-24">位置:</span>
                                <span>北京市海淀区</span>
                            </div>
                            <div class="flex">
                                <span class="text-gray-dark w-24">相机型号:</span>
                                <span>iPhone 13 Pro</span>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="font-medium mb-3">标签</h4>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">家人</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">北京</span>
                                <span class="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs">春天</span>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <h4 class="font-medium mb-3">操作</h4>
                            <div class="grid grid-cols-2 gap-2">
                                <button class="px-3 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors flex items-center justify-center space-x-1">
                                    <i class="fa-solid fa-heart"></i>
                                    <span>收藏</span>
                                </button>
                                <button class="px-3 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors flex items-center justify-center space-x-1">
                                    <i class="fa-solid fa-download"></i>
                                    <span>下载</span>
                                </button>
                                <button class="px-3 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors flex items-center justify-center space-x-1">
                                    <i class="fa-solid fa-share-alt"></i>
                                    <span>分享</span>
                                </button>
                                <button class="px-3 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors flex items-center justify-center space-x-1">
                                    <i class="fa-solid fa-trash"></i>
                                    <span>删除</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框：扫描本地相册 -->
    <div id="scan-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-xl shadow-lg max-w-md w-full animate-fade-in">
            <div class="p-5">
                <h3 class="font-semibold text-lg mb-4">扫描本地相册</h3>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2">相册目录</label>
                        <input type="text" placeholder="请选择相册目录" class="w-full px-4 py-2 rounded-lg border border-gray-medium focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                        <button class="mt-2 px-3 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                            选择目录
                        </button>
                    </div>
                    
                    <div class="flex items-start">
                        <input type="checkbox" id="include-subfolders" class="mt-1">
                        <label for="include-subfolders" class="ml-2 text-sm">包含子文件夹</label>
                    </div>
                    
                    <div class="flex items-start">
                        <input type="checkbox" id="overwrite-existing" class="mt-1">
                        <label for="overwrite-existing" class="ml-2 text-sm">覆盖现有数据</label>
                    </div>
                    
                    <div class="flex items-start">
                        <input type="checkbox" id="enable-face-recognition" class="mt-1">
                        <label for="enable-face-recognition" class="ml-2 text-sm">启用面部识别</label>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end space-x-3">
                    <button id="cancel-scan" class="px-4 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors">
                        取消
                    </button>
                    <button id="start-scan" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-colors">
                        开始扫描
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框：扫描进度 -->
    <div id="progress-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-xl shadow-lg max-w-md w-full animate-fade-in">
            <div class="p-5">
                <h3 class="font-semibold text-lg mb-4">正在扫描相册</h3>
                
                <div class="space-y-4">
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm">进度</span>
                            <span class="text-sm font-medium" id="progress-percentage">0%</span>
                        </div>
                        <div class="w-full bg-gray-light rounded-full h-2">
                            <div id="progress-bar" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div class="flex items-center space-x-2">
                        <i class="fa-solid fa-file-image text-primary"></i>
                        <span id="processed-files">已处理: 0 张照片</span>
                    </div>
                    
                    <div class="flex items-center space-x-2">
                        <i class="fa-solid fa-user text-primary"></i>
                        <span id="detected-faces">已识别: 0 个人脸</span>
                    </div>
                    
                    <div class="flex items-center space-x-2">
                        <i class="fa-solid fa-folder text-primary"></i>
                        <span id="processed-folders">已扫描: 0 个文件夹</span>
                    </div>
                </div>
                
                <div class="mt-6 flex justify-end">
                    <button id="cancel-progress" class="px-4 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框：重复照片 -->
    <div id="duplicates-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-xl shadow-lg max-w-4xl w-full max-h-[90vh] flex flex-col animate-fade-in">
            <div class="p-4 flex justify-between items-center border-b">
                <h3 class="font-semibold text-lg">重复照片</h3>
                <button id="close-duplicates" class="text-gray-dark hover:text-dark">
                    <i class="fa-solid fa-times"></i>
                </button>
            </div>
            
            <div class="flex-grow overflow-auto p-4">
                <div class="space-y-6">
                    <!-- 重复组1 -->
                    <div class="bg-gray-light rounded-xl p-4">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="font-medium">3 张相似照片</h4>
                            <button class="text-sm text-primary hover:underline">全选</button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <div class="relative group">
                                <img src="https://picsum.photos/seed/dup1/300/300" alt="重复照片" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <input type="checkbox" class="w-6 h-6">
                                </div>
                                <div class="mt-2 text-sm">
                                    <p>DSC0001.jpg</p>
                                    <p class="text-gray-dark">1.2 MB</p>
                                </div>
                            </div>
                            
                            <div class="relative group">
                                <img src="https://picsum.photos/seed/dup2/300/300" alt="重复照片" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <input type="checkbox" class="w-6 h-6">
                                </div>
                                <div class="mt-2 text-sm">
                                    <p>DSC0002.jpg</p>
                                    <p class="text-gray-dark">1.1 MB</p>
                                </div>
                            </div>
                            
                            <div class="relative group">
                                <img src="https://picsum.photos/seed/dup3/300/300" alt="重复照片" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <input type="checkbox" class="w-6 h-6">
                                </div>
                                <div class="mt-2 text-sm">
                                    <p>DSC0003.jpg</p>
                                    <p class="text-gray-dark">1.3 MB</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 重复组2 -->
                    <div class="bg-gray-light rounded-xl p-4">
                        <div class="flex justify-between items-center mb-3">
                            <h4 class="font-medium">2 张相似照片</h4>
                            <button class="text-sm text-primary hover:underline">全选</button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <div class="relative group">
                                <img src="https://picsum.photos/seed/dup4/300/300" alt="重复照片" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <input type="checkbox" class="w-6 h-6">
                                </div>
                                <div class="mt-2 text-sm">
                                    <p>DSC0004.jpg</p>
                                    <p class="text-gray-dark">0.9 MB</p>
                                </div>
                            </div>
                            
                            <div class="relative group">
                                <img src="https://picsum.photos/seed/dup5/300/300" alt="重复照片" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                    <input type="checkbox" class="w-6 h-6">
                                </div>
                                <div class="mt-2 text-sm">
                                    <p>DSC0005.jpg</p>
                                    <p class="text-gray-dark">0.8 MB</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="p-4 border-t flex justify-end space-x-3">
                <button id="cancel-delete" class="px-4 py-2 bg-gray-light hover:bg-gray-medium rounded-lg transition-colors">
                    取消
                </button>
                <button id="confirm-delete" class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors">
                    删除选中项
                </button>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 设置统计数据
            document.getElementById('total-photos').textContent = '286';
            document.getElementById('total-folders').textContent = '12';
            document.getElementById('total-faces').textContent = '8';
            document.getElementById('storage-used').textContent = '1.4 GB / 5 GB';
            
            // 照片类型分布图表
            const typeCtx = document.getElementById('typeChart').getContext('2d');
            new Chart(typeCtx, {
                type: 'doughnut',
                data: {
                    labels: ['自拍', '风景', '人物', '美食', '其他'],
                    datasets: [{
                        data: [30, 25, 20, 15, 10],
                        backgroundColor: [
                            '#165DFF',
                            '#0FC6C2',
                            '#FF7D00',
                            '#722ED1',
                            '#86909C'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
            
            // 月度新增照片图表
            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
            new Chart(monthlyCtx, {
                type: 'bar',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '新增照片',
                        data: [25, 35, 45, 60, 55, 66],
                        backgroundColor: '#165DFF',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: true,
                                drawBorder: false
                            }
                        },
                        x: {
                            grid: {
                                display: false,
                                drawBorder: false
                            }
                        }
                    }
                }
            });
            
            // 模态框控制
            const photoModal = document.getElementById('photo-modal');
            const closeModal = document.getElementById('close-modal');
            const scanModal = document.getElementById('scan-modal');
            const progressModal = document.getElementById('progress-modal');
            const duplicatesModal = document.getElementById('duplicates-modal');
            const refreshBtn = document.getElementById('refresh-btn');
            const cancelScan = document.getElementById('cancel-scan');
            const startScan = document.getElementById('start-scan');
            const cancelProgress = document.getElementById('cancel-progress');
            const closeDuplicates = document.getElementById('close-duplicates');
            const cancelDelete = document.getElementById('cancel-delete');
            const confirmDelete = document.getElementById('confirm-delete');
            const menuToggle = document.getElementById('menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            
            // 打开照片详情模态框
            const photos = document.querySelectorAll('.photo-hover');
            photos.forEach(photo => {
                photo.addEventListener('click', () => {
                    photoModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                });
            });
            
            // 关闭照片详情模态框
            closeModal.addEventListener('click', () => {
                photoModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 打开扫描模态框
            refreshBtn.addEventListener('click', () => {
                scanModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭扫描模态框
            cancelScan.addEventListener('click', () => {
                scanModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 开始扫描
            startScan.addEventListener('click', () => {
                scanModal.classList.add('hidden');
                progressModal.classList.remove('hidden');
                
                // 模拟进度更新
                let progress = 0;
                const progressBar = document.getElementById('progress-bar');
                const progressPercentage = document.getElementById('progress-percentage');
                const processedFiles = document.getElementById('processed-files');
                const detectedFaces = document.getElementById('detected-faces');
                const processedFolders = document.getElementById('processed-folders');
                
                const interval = setInterval(() => {
                    progress += 1;
                    progressBar.style.width = `${progress}%`;
                    progressPercentage.textContent = `${progress}%`;
                    
                    processedFiles.textContent = `已处理: ${Math.floor(progress * 2.86)} 张照片`;
                    detectedFaces.textContent = `已识别: ${Math.floor(progress * 0.08)} 个人脸`;
                    processedFolders.textContent = `已扫描: ${Math.floor(progress * 0.12)} 个文件夹`;
                    
                    if (progress >= 100) {
                        clearInterval(interval);
                        
                        // 扫描完成后显示重复照片
                        setTimeout(() => {
                            progressModal.classList.add('hidden');
                            duplicatesModal.classList.remove('hidden');
                        }, 1000);
                    }
                }, 50);
            });
            
            // 取消扫描进度
            cancelProgress.addEventListener('click', () => {
                progressModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 关闭重复照片模态框
            closeDuplicates.addEventListener('click', () => {
                duplicatesModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 取消删除
            cancelDelete.addEventListener('click', () => {
                duplicatesModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 确认删除
            confirmDelete.addEventListener('click', () => {
                duplicatesModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
                
                // 显示删除成功提示（实际项目中应该有一个提示组件）
                alert('已删除选中的重复照片');
            });
            
            // 移动端菜单切换
            menuToggle.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 视图切换
            const viewGrid = document.getElementById('view-grid');
            const viewList = document.getElementById('view-list');
            const viewSlideshow = document.getElementById('view-slideshow');
            const photoGrid = document.querySelector('.photo-grid');
            
            viewGrid.addEventListener('click', () => {
                photoGrid.classList.remove('photo-grid-sm', 'photo-grid-xl');
                photoGrid.classList.add('photo-grid');
                
                viewGrid.classList.remove('bg-gray-light', 'text-dark');
                viewGrid.classList.add('bg-primary', 'text-white');
                
                viewList.classList.remove('bg-primary', 'text-white');
                viewList.classList.add('bg-gray-light', 'text-dark');
                
                viewSlideshow.classList.remove('bg-primary', 'text-white');
                viewSlideshow.classList.add('bg-gray-light', 'text-dark');
            });
            
            viewList.addEventListener('click', () => {
                photoGrid.classList.remove('photo-grid', 'photo-grid-xl');
                photoGrid.classList.add('photo-grid-sm');
                
                viewList.classList.remove('bg-gray-light', 'text-dark');
                viewList.classList.add('bg-primary', 'text-white');
                
                viewGrid.classList.remove('bg-primary', 'text-white');
                viewGrid.classList.add('bg-gray-light', 'text-dark');
                
                viewSlideshow.classList.remove('bg-primary', 'text-white');
                viewSlideshow.classList.add('bg-gray-light', 'text-dark');
            });
            
            viewSlideshow.addEventListener('click', () => {
                photoGrid.classList.remove('photo-grid', 'photo-grid-sm');
                photoGrid.classList.add('photo-grid-xl');
                
                viewSlideshow.classList.remove('bg-gray-light', 'text-dark');
                viewSlideshow.classList.add('bg-primary', 'text-white');
                
                viewGrid.classList.remove('bg-primary', 'text-white');
                viewGrid.classList.add('bg-gray-light', 'text-dark');
                
                viewList.classList.remove('bg-primary', 'text-white');
                viewList.classList.add('bg-gray-light', 'text-dark');
            });
        });
    </script>
</body>
</html>
    